<!DOCTYPE html>
<html lang="lang">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/normalize.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
	<style>
	html,body{
		height: 100%;
		overflow:hidden;
	}
	#error{
		height: 100%;
	}
	.content{
		background: url(../img/403bg.jpg);
		background-size:cover;
		text-align: center;
		height:calc(100% - 66px);
		padding-top: 270px;
	}
	.text{
		font-size: 56px;
		color: #e60d0d;
		padding-top: 10px;
	}
	</style>
</head>
<body>
	<div id="error" v-cloak>
		<!-- 头部导航组件 -->
		<!--<header-nav></header-nav>-->
		<header class="header header-skin skin inner-align header-border clearfix">
			<h1 class="header-logo fl">
				<a href="javascript:;"></a>
			</h1>
			<ul class="nav-list fl">
				<li class="nav-item fl  ">
					<a href="../index.html">全网监控</a>
				</li>
				<li class="nav-item  fl">
					<a href="javascript:;"  @click="isOpen=!isOpen">主操辅助</a>
					<ul class="link-list posSub border" v-if="isOpen">
						<li v-for="item in linkList" class="border">
							<a :href="item.link" @click="isOpen=true">{{item.title}}</a>
						</li>
					</ul>
				</li>
				<li class="nav-item nav--active fl">
					<a href="javascript:;">优化分析</a>
				</li>
			</ul>
			<div class="right-bar fr">
				<div class="right-bar-time inner-align fl">{{timeStamp|formatterTime}}</div>
				<div class="right-bar-help inner-align fl">{{username}}</div>
				<div class="right-bar-role inner-align fl">
					<form action="/logout" method="post">
						<input type="submit" value="">
					</form>
				</div>
			</div>
		</header>
		<div class="content">
			<img src="../img/403.png" alt="">
			<p class="text">抱歉！您没有访问此页面的权限！</p>
		</div>
	</div>	
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/vue.js"></script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
<script src="../js/components.js"></script>

<script>
var error_vm=new Vue({
	el:'#error',
	data:{
        timeStamp:0,
        linkList:[
            {link:'gaolu.html',title:'高炉'},
            {link:'hotwind.html',title:'热风炉'},
            {link:'zhagang.html',title:'轧钢'},
            {link:'guolu.html',title:'锅炉'},
            {link:'dongdiao.html',title:'动调'},
            {link:'other.html',title:'其他部门'}
        ],
        isOpen:false,
		username:''
	},
    filters:{
        formatterTime:function(val){
            var oDate=new Date(val);
            var year=oDate.getFullYear();
            var month=oDate.getMonth()+1;
            var date=oDate.getDate();
            var hour=oDate.getHours();
            var minute=oDate.getMinutes();
            return year+'年'+toDou(month)+'月'+toDou(date)+'日  '+toDou(hour)+':'+toDou(minute);
        }
	},

	mounted:function(){
	    this.$nextTick(function(){
            this.getTimeStamp();
            this.getName();
		})
	},
	methods:{
        getTimeStamp:function(){
            var _this=this;
            var success=function(res){
                _this.timeStamp=res.data.time;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载时间戳出错了');
            };

            this.$http.get(URL+'/time/getTime').then(success,error);
        },
        getName:function(){
            var _this=this;
            var success=function(res){
                _this.username=res.data.username;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载用户名出错了');
            };
            this.$http.get(URL+'/system/getuserinfo').then(success,error);
        }
	}
})
</script>
</html>